<template>
  <div class="theme-switch">
    <el-dropdown trigger="click" @command="handleCommand">
      <div class="theme-button">
        <component :is="`el-icon-${getThemeIcon()}`" />
        <span class="theme-name">{{ currentThemeLabel }}</span>
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item 
            v-for="theme in availableThemes" 
            :key="theme.name" 
            :command="theme.name"
            :class="{ 'active-theme': currentTheme === theme.name }"
          >
            <div class="theme-item">
              <span 
                class="theme-color-dot" 
                :style="{ backgroundColor: theme.color }" 
              />
              <span>{{ theme.label }}</span>
            </div>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useTheme } from '@/hooks/useTheme'

// 使用主题钩子获取主题相关功能
const { 
  currentTheme, 
  availableThemes, 
  changeTheme,
  getThemeIcon
} = useTheme()

// 获取当前主题的标签名称
const currentThemeLabel = computed(() => {
  const theme = availableThemes.value.find(t => t.name === currentTheme.value)
  return theme ? theme.label : '蓝色主题'
})

// 处理主题切换命令
const handleCommand = (themeName) => {
  changeTheme(themeName)
}
</script>

<style lang="scss" scoped>
.theme-switch {
  display: inline-flex;
  margin-right: 15px;
  
  .theme-button {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 4px;
    color: var(--text-color-secondary);
    transition: background-color 0.3s;
    
    &:hover {
      background-color: #f5f7fa;
      color: var(--primary-color);
    }
    
    .el-icon {
      font-size: 18px;
      margin-right: 5px;
    }
    
    .theme-name {
      font-size: 14px;
    }
  }
}

.theme-item {
  display: flex;
  align-items: center;
  
  .theme-color-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 8px;
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
}

.active-theme {
  color: var(--primary-color);
  background-color: rgba(var(--primary-color-rgb), 0.1);
}

// 暗黑模式适配
.dark-mode {
  .theme-button:hover {
    background-color: #2a2a2a;
  }
}
</style> 